<template >
    <div @tap="toDetail" class="tepContainer">
       <div class="avatar_date">
           <img :src="item.avatar" alt=""/>
           <span>{{item.data}}</span>
       </div>
       <p class="company">{{item.title}}</p>
       <img class="detail_img" :src="item.detail_img"/>
       <p class="content">{{item.detail_content}}</p>
       <div class="view_star_container">
            <img src="/static/images/icon/star.png"/>
            <span>{{item.love_count}}</span>
            <img src="/static/images/icon/view.png"/>
            <span>{{item.attention_count}}</span>
       </div>
    </div>
</template>
<script>
export default {
    props:[
        'item','index'
    ],
    methods:{
        toDetail(){
            //跳转到详情页面+传参数过去index
            wx.navigateTo({
               url:'/pages/detail/main?index='+this.index
            })
        }
    }
}
</script>
<style>
 .tepContainer{
     display:flex;
     flex-direction: column;
     border-bottom: 1rpx solid #eee;
 }
 .avatar_date{
     padding: 10rpx;
 }
 .avatar_date img{
     width: 60px;
     height: 60px;
     vertical-align: middle;
     margin-right: 10rpx;
 }
 .avatar_date span{
     font-size: 28px;
     color: #333;
 }
 .company{
      font-size:40rpx;
      font-weight: bold;
      padding: 10rpx;
 }
 .detail_img{
     width:100%;
     height: 460rpx;
 }
 .content{
    font-size: 32rpx;
    text-indent: 32rpx;
    line-height: 50rpx;
    letter-spacing: 3rpx;
 }
 .view_star_container img{
     width: 32rpx;
     height: 32rpx;
     vertical-align: middle;
     margin-left: 5rpx;
 }
 .view_star_container span{
     font-weight: 28rpx;
     color: #333;
      margin-left: 5rpx;
 }
</style>